<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<style type="text/css">
		.fade-enter,
		.fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active,.fade-leave-active {
			transition: opacity 3s;

		}
	</style>
</head>
<body>
	<div id="app">
		<transition name="fade" :duration="{enter:1000, leave:1000}" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active"  appear-active-class="animated swing">  

			<!-- swing执行的是一秒，自定义动画为3秒，究竟以哪个时间为准，则用type="transition"，确定为以过渡时长为总时长。 -->

			<!-- 想控制得更加精准，则可以在tansition里加   ：duration="{enter:1000, leave:10000s}" -->

			<!-- appear-active-class是第一次打开页面时执行的动画，仅是页面打开或者刷新时执行， 记住，在加这个的同时要另外加上appear -->
		


			<!-- enter-active-应用的类名，类名可以自定义，亦可以是其他库的类名，千万要记住，enter-active代表进入时的过渡效果，leave-active是离开时的偶读效果 -->

			<div v-show="show">
			hello my dear
			</div>
		</transition>
		
		<button @click="handle">改变</button>
		
		
	</div>
</body>
<script type="text/javascript">
	

	var vm = new Vue({
		el:"#app",
		data:{
			show:true
	
		},
		methods:{
			handle:function() {
				this.show = (this.show == true) ? false : true;
			}
		}

	})



		
</script>
</html>